import { Table } from "antd";
import React from "react";
import { Resizable } from "react-resizable";
import "/node_modules/react-resizable/css/styles.css";



const ResizableTitle = (props) => {
  const { onResize, width, ...restProps } = props;
  if (width === undefined) {
    return <th {...restProps}></th>;
  }
  return (
    <Resizable width={width} height={0} onResize={onResize}>
      <th {...restProps}></th>
    </Resizable>
  );
};

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: props.dataSource,
      columns: props.columns.map((col) => {
        col.onHeaderCell = () => ({
          width: col.width,
          onResize: this.handleResize(col)
        });
        return col;
      })
    };
  }

  components = {
    header: {
      cell: ResizableTitle
    }
  };

  handleResize = (column) => (e, { size }) => {
    this.setState(({ columns }) => {
      columns.forEach((item) => {
        if (item === column) {
          item.width = size.width;
        }
      });

      return { columns };
    });
  };

  render() {
    return (
      <div>
        <Table
          bordered
          {...this.props.tableConfig}
          dataSource={this.state.dataSource}
          columns={this.state.columns}
          components={this.components}
        />
      </div>
    );
  }
}
